<template>
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    class="dialog-title"
    @close="closeDialog"
    @open="openDialogFn"
  >
    <el-row>
      <el-col :span="6">
        <div>
          <span>【题型】：</span>
          <span>{{ questionsDetail.questionType }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <span>【编号】：</span>
          <span>{{ questionsDetail.id }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <span>【难度】：</span>
          <span>{{ questionsDetail.difficulty }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <span>【标签】：</span>
          <span>{{ questionsDetail.tags }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <span>【学科】：</span>
          <span>{{ questionsDetail.subjectName }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <span>【目录】：</span>
          <span>{{ questionsDetail.directoryName }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <span>【方向】：</span>
          <span>{{ questionsDetail.direction }}</span>
        </div>
      </el-col>
    </el-row>
    <hr />
    <div>
      <div>【题干】：</div>
      <div>
        <span v-html="questionsDetail.question" />
      </div>
      <div v-if="type === 1 || type === 2">
        <span class="xuanxiang">{{ questionsDetail.questionType }}题</span>
        <span>选项：（以下选中的选项为正确答案）</span>
      </div>
      <div v-if="type === 1">
        <el-radio
          v-for="(item, index) in questionsDetail.options"
          :key="index"
          v-model="radio"
          disabled
          :label="item.isRight"
        >
          {{ item.title }}
        </el-radio>
      </div>
      <div v-else-if="type === 2">
        <!--  -->
        <el-checkbox
          v-for="(item, index) in questionsDetail.options"
          :key="index"
          v-model="item.isRight"
          disabled
        >
          {{ item.title }}
        </el-checkbox>
      </div>
      <hr />
      <div>
        <span>【参考答案】：</span>
        <el-button type="danger" size="mini">视频答案预览</el-button>
      </div>
      <hr />
      <div>
        <span>【答案解析】：</span>
        <span v-html="questionsDetail.answer" />
      </div>
      <hr />
      <div>
        <span>【题目备注】：</span>
        <span>{{ questionsDetail.remarks }}</span>
      </div>
    </div>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getQuestionsxqApi } from '@/api/questions'
import { questionType, difficulty } from '@/api/constants/constants'
export default {
  props: {
    showDialog: {
      type: Boolean
    },
    id: {
      type: Number
    }
  },

  data() {
    return {
      questionsDetail: {}, // 题目详情
      radio: true, // 单选按钮
      checked: true, // 多选按钮选中状态
      type: 1, // 题目类型
      red: '#000'
    }
  },
  methods: {
    // 关闭弹层触发的方法
    closeDialog() {
      this.$emit('update:showDialog', false)
    },
    // 打开弹层触发的方法
    async openDialogFn() {
      const data = await getQuestionsxqApi(this.id)
      console.log(data)
      this.questionsDetail = data
      questionType.forEach((item) => {
        if (data.questionType === String(item.value)) {
          this.questionsDetail.questionType = item.label
          this.type = item.value
        }
      })
      difficulty.forEach((item) => {
        if (data.difficulty === String(item.value)) {
          this.questionsDetail.difficulty = item.label
        }
      })
      this.questionsDetail.options.forEach((item) => {
        if (item.isRight === 1) {
          item.isRight = true
        } else {
          item.isRight = false
        }
      })
      console.log(this.questionsDetail.options)
      console.log(this.radio)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__header {
  color: #fff;
  background-color: #409eff;
  padding: 20px;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin: 10px 0;
}
.xuanxiang {
  margin-right: 5px;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
  color: #409eff;
}
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #409eff;
  border-color: #409eff;
}
</style>
